<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:include="include :: header('新增商品模型')" />
	</head>
	<body class="white-bg">
		<div class="wrapper wrapper-content animated fadeInRight ibox-content">
			<form class="form-horizontal m" id="form-model-add" action="">
				<h4 class="form-header h4">
					商品模型
				</h4>
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group">
							<div class="form-group">
								<label class="col-sm-4 control-label is-required">
									模型名称：
								</label>
								<div class="col-sm-8">
									<input name="modelName" class="form-control" type="text" required>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group">
							<label class="col-sm-4 control-label is-required">
								排序号：
							</label>
							<div class="col-sm-8">
								<input name="sort" class="form-control" type="text" required>
							</div>
						</div>
					</div>
				</div>
				<h4 class="form-header h4">
					商品属性
				</h4>
				<div class="tabs-container">
					<ul class="nav nav-tabs">
						<li class="active">
							<a data-toggle="tab" href="#specTab" aria-expanded="true">
								商品规格
							</a>
						</li>
						<li class="">
							<a data-toggle="tab" href="#paramTab" aria-expanded="false">
								商品参数
							</a>
						</li>
					</ul>
					<div class="tab-content">
						<div id="specTab" class="tab-pane active">
							<div class="col-sm-12">
								<input id="selectSpecData" name="selectSpecData" type="hidden">
								<div class="col-sm-12 select-table table-striped">
									<table id="spec-table">
									</table>
								</div>
							</div>
						</div>
						<div id="paramTab" class="tab-pane">
							<div class="col-sm-12 select-table table-striped">
								<table id="param-table">
								</table>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
		<th:block th:include="include :: footer" />
		<script th:inline="javascript" type="text/javascript">
			var prefix = ctx + "shop/goods/model"
			var selectSpecId = 0;
			$("#form-model-add").validate({
				focusCleanup: true,
				onkeyup: false,
				rules: {
					sort: {
						digits: true
					}
				}
			});

			$(function() {
				createSpecTable(); //规格列表
				createParamTable(); //参数列表
			});

			function submitHandler() {
				if ($.validate.form()) {
					$.operate.save(prefix + "/add", $('#form-model-add').serialize());
				}
			}

			function createSpecTable() {
				var data = [{
					specId: 0,
					attrName: "",
					attrValues: "",
					sort: 1,
				}];
				var options = {
					id: "spec-table",
					data: data,
					pagination: false,
					showSearch: false,
					showRefresh: false,
					showToggle: false,
					showColumns: false,
					sidePagination: "client",
					columns: [{
						field: 'specId',//规格id
						visible: false
					},
					{
						field: 'attrName',
						align: 'center',
						title: '规格名称',
						formatter: function(value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='specList[%s].attrName' value='%s'>", index, value);
							return html;
						}
					},
					{
						field: 'attrValues',
						align: 'center',
						title: '选项值(多值","分隔)',
						formatter: function(value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='specList[%s].attrValues' value='%s'>", index, value);
							return html;
						}
					},
					{
						field: 'sort',
						align: 'center',
						title: '排序号',
						formatter: function(value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='number' name='specList[%s].sort' value='%s'>", index, value);
							return html;
						}
					},
					{
						title: '操作',
						align: 'center',
						formatter: function(value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-primary btn-xs " href="javascript:void(0)" onclick="selectSpec(\'' + row.specId + '\')"><i class="fa fa-check-square-o"></i>选择</a> ');
							if (index == 0) {
								actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="addSpec()"><i class="fa fa-plus"></i>增加</a>');
							} else {
								actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="delSpec(\'' + row.specId + '\')"><i class="fa fa-remove"></i>删除</a>');
							}
							return actions.join('');
						}
					}]
				};
				$.table.init(options);
			}
			//新增规格
			function addSpec() {
				var count = $("#spec-table").bootstrapTable('getData').length;
				$("#spec-table").bootstrapTable('insertRow', {
					index: count,// 你想插入到哪，0表示第一行
					row: {
						specId: count,
						attrName: "",
						attrValues: "",
						sort: count + 1
					}
				})
			}
			//删除规格
			function delSpec(specId) {
				$('#spec-table').bootstrapTable('remove', {
					field: "specId",
					values: [parseInt(specId)]
				});
			}
			/*规格选择表*/
			function selectSpec(specId) {
				selectSpecId = specId;
				var options = {
					title: '选择规格',
					url: ctx + "shop/attr/selectSpec" ,
					callBack: doSubmitSpec
				};
				$.modal.openOptions(options);
			}
			/*回显规格数据*/
			function doSubmitSpec(index, layero) {
				var rows = layero.find("iframe")[0].contentWindow.getSelections();
				if (rows.length == 0) {
					$.modal.alertWarning("请至少选择一条记录");
					return;
				}
				var data = {attrName: rows[0].attrName,attrValues: rows[0].attrValues,};
				$('#spec-table').bootstrapTable('updateRow', {
					index: selectSpecId,
					row: data
				});
				$.modal.close(index);
			}

			function createParamTable() {
				var data = [{
					attrName: "",
					attrValues: "",
					sort: "",
					attrType: 1
				}];
				var options = {
					id: "param-table",
					data: data,
					pagination: false,
					showSearch: false,
					showRefresh: false,
					showToggle: false,
					showColumns: false,
					sidePagination: "client",
					columns: [{
						field: 'attrName',
						align: 'center',
						title: '参数名称',
						formatter: function(value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='attrs[%s].attrName' value='%s'>", index, value);
							return html;
						}
					},
					{
						field: 'inputType',
						align: 'center',
						title: '输入类型',
						formatter: function(value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='attrs[%s].inputType' value='%s'>", index, value);
							return html;
						}
					},
					{
						field: 'attrValues',
						align: 'center',
						title: '选项值(多值","分隔)',
						formatter: function(value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='attrs[%s].attrValues' value='%s'>", index, value);
							return html;
						}
					},
					{
						field: 'sort',
						align: 'center',
						title: '排序号',
						formatter: function(value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='number' name='attrs[%s].sort' value='%s'>", index, value);
							return html;
						}
					},
					{
						formatter: function(value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='hidden' name='attrs[%s].attrType' value='1'>", index, value);
							return html;
						}
					}]
				};
				$.table.init(options);
			}
		</script>
	</body>

</html>